<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>grid fr</title>
	<style>
		.grid {
			display: grid;
			height: 300px;
			margin: 3px;
			padding: 5px;

			grid-template-columns: 1fr 2fr 1fr;
			/* 定义网格行大小 (此时你要设定上面的 height )*/
			grid-template-rows: 1fr 2fr;
			grid-gap: 3px;

			background: #CDDC39;
			color: #fff;
			text-align: center;
			box-sizing: border-box;
			border-radius: 3px;
			overflow: hidden;
		}

		.grid div {
			display: flex;
			border-radius: 3px;
			background-color: #f65f54;
			align-items: center;
			justify-content: center;
		}

	</style>
</head>
<body>
	
	<section class="grid">
		<div class="header">header</div>
		<div class="nav">Nav</div>
		<div class="main">Main</div>
		<div class="aside">Aside</div>
		<div class="footer">Footer</div>
	</section>
	
	<section class="grid">
		<div class="header">header</div>
		<div class="nav">Nav</div>
		<div class="main">Main</div>
		<div class="aside">Aside</div>
		<div class="footer">Footer</div>
	</section>
</body>
</html>